<template>
  <h-container>
    <div class="alert alert-danger">
      注意：该页面显示已申请<span class="i-info"> 更名 </span>操作的数据列表。当管理员未通过更名申请时可进行撤消操作。
    </div>
    <div class="h-toolbar">
      <div class="inline-item">
        <div class="label inline">
          订单时间:
        </div>
        <h-date-range-picker v-model="search.dates"/>
      </div>

      <div class="inline-item">
        <div class="label inline">
          新买家:
        </div>

        <div class="inline">
          <h-user-choose v-model="search.newBuyerId"></h-user-choose>
        </div>
      </div>
      <div class="inline-item">
        <el-button type="primary" @click="searchData" style="margin-right: 10px;"><i class="fa fa-search"></i> 查询
        </el-button>
      </div>
      <div class="inline-item">
        <div class="label inline">
          订单分类:
        </div>
        <div class="inline">
          <el-radio-group v-model="search.renamed" @change="typeChange">
            <el-radio :label="0"> 未更名订单</el-radio>
            <el-radio :label="1"> 已更名订单</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div>
      <el-table
        :data="renames"
        border
        tooltip-effect="dark"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        ref="table"
      >
        <!--
        <el-table-column
          type="selection"
          width="48" align="center" fixed="left">
        </el-table-column>
        -->
        <el-table-column
          label="订单编号" width="120" align="center"
        >
          <template slot-scope="scope">{{ scope.row.order.sn }}</template>
        </el-table-column>
        <el-table-column
          label="新买家" min-width="200"
        >
          <template slot-scope="scope">
            <h-user-display v-model="scope.row.newBuyer"/>
          </template>
        </el-table-column>


        <el-table-column
          label="商品信息" min-width="100">
          <template slot-scope="scope">
            <h-good-info-display v-model="scope.row.order" :displayInfo="false"></h-good-info-display>
          </template>
        </el-table-column>

        <el-table-column label="商品规格" min-width="100">
          <template slot-scope="scope">
            <h-specs-display v-model="scope.row.order"></h-specs-display>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" width="160" prop="createTime" align="center">
        </el-table-column>
        <el-table-column label="订单信息" min-width="200">
          <template slot-scope="scope">
            <h-order-info-display v-model="scope.row.order" :create-time="false"></h-order-info-display>
          </template>
        </el-table-column>

        <el-table-column
          label="订单金额"
          min-width="150">
          <template slot-scope="scope">
            <h-order-pay-info-display v-model="scope.row.order"/>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="120">
          <template slot-scope="scope">
            <h-order-status-display v-model="scope.row.order" :arrival="true" :pay="true"></h-order-status-display>
          </template>
        </el-table-column>
        <el-table-column v-if="search.renamed==0" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="unrenameAction(scope.$index,scope.row)">
              撤消更名
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="row">
        <div class="col h-pagination">
          <div v-if="selecteds.length>0" style="float: left;margin-left: 5px;">
            <el-button v-if="search.renamed==0" type="primary" @click="batchUnrename"> 批量撤消更名</el-button>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.pagination.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="search.pagination.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="search.pagination.total" class="float-right">
          </el-pagination>
        </div>
      </div>
    </div>
  </h-container>
</template>
<script>
  import HContainer from 'src/components/shop/layout/Container'
  import HDateRangePicker from 'src/components/common/HDateRangePicker'
  import FrontService from 'src/service/front'
  import HOrderStatusDisplay from 'src/components/common/display/HOrderStatusDisplay'
  import HGoodInfoDisplay from 'src/components/common/display/HGoodInfoDisplay'
  import HSpecsDisplay from 'src/components/common/display/HSpecsDisplay'
  import HOrderInfoDisplay from 'src/components/common/display/HOrderInfoDisplay'
  import HOrderPayInfoDisplay from 'src/components/common/display/HOrderPayInfoDisplay'
  import HRenameDialog from 'src/components/shop/common/HRenameDialog'
  import HSpecChoose from '../../common/choose/HSpecChoose'
  import HUserChoose from 'src/components/common/HUserChoose'
  import HUserDisplay from '../../common/display/HUserDisplay'

  export default {
    name: 'Rename',
    components: {
      HUserDisplay,
      HSpecChoose,
      HContainer,
      HDateRangePicker,
      HOrderStatusDisplay,
      HGoodInfoDisplay,
      HSpecsDisplay,
      HOrderPayInfoDisplay,
      HOrderInfoDisplay,
      HRenameDialog,
      HUserChoose
    },
    data() {
      return {
        search: {
          renamed: 0,
          newBuyerId: null,
          status: 1,
          dates: [],
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          }
        },
        loading: false,
        renames: [],
        selecteds: [],
      }
    },
    methods: {
      typeChange: function (v) {
        this.renames = []
        if (v == 0) {
          this.search.renamed = 0
        } else {
          this.search.renamed = 1
        }
        this.search.pagination.page = 1
        this.getDatas()
      },
      handleSelectionChange: function (v) {
        this.selecteds = v
      },
      handleSizeChange: function (size) {
        this.search.pagination.size = size
        this.getDatas()
      },
      unrenameAction: function (index, data) {
        const me = this
        this.$confirm('此操作将撤消该条更名数据，操作不可恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const d = {
            ids: [data.id],
            status: 0
          }
          FrontService.orderUnRename(d).then(ds => {
            if (ds != null) {
              me.$message({
                type: 'success',
                message: '撤消成功!'
              })
              me.searchData()
            }
          })
        }).catch(() => {
        })
      },
      batchUnrename: function () {
        const me = this
        this.$confirm('此操作将撤消选择的更名数据，操作不可恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = me.selecteds.map(d => {
            return d.id
          })
          const data = {
            ids: ids,
            status: 0
          }
          FrontService.orderUnRename(data).then(ds => {
            if (ds != null) {
              me.$message({
                type: 'success',
                message: '撤消成功!'
              })
              me.searchData()
            }
          })
        }).catch(() => {
        })
      },
      handleCurrentChange: function (page) {
        this.search.pagination.page = page
        this.getDatas()
      },
      getDatas: function () {
        const me = this
        me.loading = true
        FrontService.renameSearch(this.search).then(d => {
          if (d != null) {
            me.renames = d.datas
            me.search.pagination = d.pagination
          }
          me.loading = false
        })
      },
      searchData: function () {
        this.search.pagination.page = 1
        this.getDatas()
      }
    },
    mounted: function () {
      this.getDatas()
    }
  }
</script>
